<template>
    <div id="login">
        <header id="header">
            <div style="display: flex;align-items: center">
                <a href="javascript:;" class="logo"></a>
                <a href="" style="color: white;font-size: 20px;font-weight: bolder;margin-left: 2px">Edward</a>
            </div>
            <i class="icons">blog</i>
        </header>

        <!-- 页面主体START -->
        <section id="main">
            <img style="width: 80px;height:80px;margin-left: 100px;margin-top:-20px;margin-bottom: -50px;"
                 src="../../assets/images/logo.png"
                 alt="">
            <h1 style="margin-top: -30px">Edward博客后台登录</h1>
            <Form action="javascript:;" accept-charset="utf-8" ref="loginRef" :model="loginForm" :rules="LoginRule">

                <FormItem prop="userPhone">
                    <input type="text" placeholder="输入手机号" data-required="required" autocomplete="off"
                           v-model="loginForm.userPhone">
                </FormItem>

                <FormItem prop="password">
                    <input type="password" id="" name="" placeholder="请输入密码" data-required="required" autocomplete="off"
                           v-model="loginForm.password">
                </FormItem>

                <!--登录验证码-->
                <FormItem>
                    <div class="s-canvas">
                        <canvas width="40" height="10" id="verifyCanvas"></canvas>
                        <img @click="changeChecknum" id="code_img">
                        <input id="identity" type="text" v-model="codeItem" data-required="required"
                               placeholder="请输入验证码">
                    </div>
                </FormItem>

                <FormItem class="clearfix btn_login">
                    <input type="submit" value="登录" @click="handleSubmit('loginRef')">
                </FormItem>

                <FormItem class="clearfix goregister">
                    <span class="reg_now">Edward博客后台管理系统欢迎您！</span>
                </FormItem>

            </Form>
        </section>
        <!-- 页面主体END -->
        <footer id="footer">
            <div>有事儿您Q我：2810315114<span style="margin-left: 2%;color: white">邮箱：damon_edward@qq.com</span></div>
            <p>Copyright ©{{nowYear}} Edward | 备案号：皖ICP备20006135号-1</p>
        </footer>
    </div>
</template>

<script>
  import { Checknum } from '../../assets/js/checknum'

  export default {
    data() {
      return {
        nowYear: 0,
        identifyCode: '',
        codeItem: '',
        loginForm: {
          userPhone: '',
          password: ''
        },
        // 登录效验规则
        LoginRule: {
          userPhone: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 更换验证码内容
      changeChecknum() {
        this.identifyCode = Checknum('code_img', 'verifyCanvas')
      },
      // 登录
      handleSubmit(name) {
        // 判断本地sessionStorage中是否有token
        if (window.sessionStorage.getItem('lhamster_identity_info') !== null && window.sessionStorage.getItem('lhamster_identity_info') !== '') {
          this.$router.push('/index')
        }
        this.$refs[name].validate((valid) => {
          if (!valid) return
          // 检测验证码是否为空|是否正确
          if (this.codeItem == null || this.codeItem === '') {
            this.$Message.error('验证码不能为空!')
            return
          }
          // 不区分大小写
          if (this.codeItem.toLowerCase() !== this.identifyCode.toLowerCase()) {
            this.$Message.error('验证码错误!')
            return
          }
          // 检查重复登录
          if (window.sessionStorage.getItem('lhamster_identity_info') != null) {
            this.$Message.info('不可重复登录，系统将自动为您跳转到主页')
            this.$router.push('/index')
            return
          }
          var params = new URLSearchParams()
          params.set('userPhone', this.loginForm.userPhone)
          params.set('password', this.loginForm.password)
          // 登录（用户信息存在sessionStorage中，七天有效期）
          this.$http.post('login', params).then(response => {
            response = response.data
            // 登录成功
            if (response.code === 2000) {
              // 将jwt存入sessionStorage
              window.sessionStorage.setItem('lhamster_identity_info', response.data.lhamster_identity_info)
              // 获取用户信息，存入sessionStorage
              this.$http.get('user').then(res => {
                res = res.data
                if (res.code === 0) {
                  // 将用户信息存入sessionStorage中
                  window.sessionStorage.setItem('nickname', res.data.unickname)
                  window.sessionStorage.setItem('headpicture', res.data.uheadpicture)
                  window.sessionStorage.setItem('admin', res.data.uadmin)
                } else {
                  this.$Message.error(res.msg)
                }
              })
              // 提示登录成功
              this.$Message.success(response.msg)
              // 跳转到主页
              var that = this
              setTimeout(function () {
                that.$router.push('/index')
              }, 1500)
            } else {
              this.$Message.error(response.msg)
            }
            // 更新验证码
            this.changeChecknum()
          })
        });
      }
    },
    mounted() {
      this.nowYear = new Date().getFullYear()
      this.changeChecknum()
    }
  }
</script>

<style scoped>
    /* 验证码样式 */
    .s-canvas {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #code_img {
        width: 120px;
        height: 40px;
    }

    #identity {
        width: 120px;
        height: 40px;
    }

    /* 设置背景的地方 */
    #login {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica;
        color: #333;
        word-wrap: break-word;
        -webkit-font-smoothing: antialiased;
        background: url(../../assets/images/bg_cb3e28c.jpg) no-repeat #000;
        background-size: 100% 100%;
        background-attachment: fixed
    }

    .reg_now {
        font-size: larger;
        margin-left: 10px;
    }

    a {
        background-color: transparent;
        outline: 0;
        text-decoration: none
    }

    a:hover {
        text-decoration: underline
    }

    p {
        margin: 0
    }

    p + p {
        margin-top: 10px
    }

    img {
        border: 0;
        vertical-align: top;
        display: inline-block
    }

    button, input, optgroup, select, textarea {
        font-size: 14px;
        margin: 0;
        padding: 0;
        border: 1px solid #cecece
    }

    button:focus, input:focus, optgroup:focus, select:focus, textarea:focus {
        outline: 0
    }

    input[type=text], input[type=password] {
        color: #333;
        width: 280px;
        height: 46px;
        border: 1px solid #cecece;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        padding: 12px;
    }

    label, select, button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox] {
        cursor: pointer
    }

    input[type=checkbox], input[type=radio] {
        padding: 0
    }

    input[type=submit], input[type=reset], input[type=button], button {
        -webkit-appearance: none
    }

    i {
        font-style: normal
    }

    ul {
        margin: 0;
        padding: 0
    }

    li {
        list-style: none
    }

    .fl {
        float: left
    }

    .fr {
        float: right
    }

    .clearfix {
        *zoom: 1
    }

    .clearfix:before, .clearfix:after {
        content: "";
        display: table
    }

    .clearfix:after {
        clear: both
    }

    #header {
        position: absolute;
        left: 180px;
        top: 28px
    }

    /* 设置左上角标志的地方 */
    #header .logo {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: url(../../assets/images/logo.png) no-repeat;
        background-size: contain
    }

    #header .icons {
        position: absolute;
        top: 8px;
        left: 120px;
        line-height: 16px;
        font-size: 12px;
        color: #fff;
        padding: 0 4px;
        background-color: #ed7266;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box
    }

    @media screen and (max-width: 600px) {
        #header {
            position: relative;
            left: auto;
            top: auto;
            padding-top: 3%
        }

        #header a {
            margin: 0 auto;
            position: relative;
            left: -18px
        }

        #header .icons {
            top: 20px;
            left: 50%;
            margin-left: 38px
        }

        #footer {
            display: none
        }
    }

    #main {
        width: 440px;
        height: 500px;
        background: #fff;
        padding: 46px 80px;
        position: relative;
        left: 50%;
        top: 108px;
        margin: 0 0 108px -233px;
        z-index: 2
    }

    #footer {
        width: 800px;
        margin: 0 auto;
        color: #fff;
        position: fixed;
        left: 50%;
        bottom: 14px;
        z-index: 1;
        margin-left: -400px
    }

    #footer p a {
        font-size: 14px;
        color: #fff;
        text-align: center;
        margin: 0 12px
    }

    #footer p {
        color: #858687;
        font-size: 12px;
        text-align: center;
        margin: 5px 0
    }

    #footer div {
        text-align: center
    }

    #footer div span {
        color: #a9a9a9
    }

    #main .input_warning {
        border: 1px solid #fd5f39
    }

    @media only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 240dpi), only screen and (min-resolution: 2dppx) {
        #header .logo {
            background-image: url(../../assets/images/bg_cb3e28c.jpg)
        }
    }

    #main h1 {
        font-size: 14px;
        color: #555;
        text-align: center;
        width: 150px;
        padding-top: 78px;
        margin: 0 auto 25px auto;
    }

    #main input[type=submit] {
        border: 0;
        height: 46px;
        width: 100%;
        color: #fff;
        font-size: 16px;
        text-align: center;
        background: #3dca99;
        -webkit-border-radius: 23px;
        -moz-border-radius: 23px;
        border-radius: 23px;
        margin: 18px 0
    }

    #main .btn_login {
        border-bottom: 1px solid #e3e4e5
    }

    #main .autologin {
        color: #555;
        margin: 9px 3px 0 0
    }

    #main .forgot_pwd {
        float: right;
        color: #3dca99;
        font-size: 12px;
        margin: 5px 0 0
    }

    #main .goregister {
        margin-top: -20px;
    }

    #main .goregister a {
        float: right;
        padding: 3px 15px;
        border: 1px solid #3dca99;
        color: #3dca99;
        margin-top: -5px;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 15px
    }

    #main .goregister a:hover {
        text-decoration: none
    }

    #main .verifyCodeInput input {
        display: inline;
        width: 137px;
        margin-right: 6px
    }

    #main .verifyCodeInput .yzm {
        width: 100px;
        height: 46px;
        vertical-align: middle;
        display: inline;
        margin: 10px 0
    }

    #main .verifyCodeInput .reflash {
        display: inline-block;
        height: 20px;
        width: 20px;
        vertical-align: middle;
        margin-left: 6px;
        background: url(../../assets/images/bg_cb3e28c.jpg) center center no-repeat;
        color: #3dca99
    }

    @media only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 240dpi), only screen and (min-resolution: 2dppx) {
        #main h1 {
            background: url(../../assets/images/bg_cb3e28c.jpg) no-repeat;
            background-size: 64px 64px
        }
    }

    @media screen and (max-width: 600px) {
        #main {
            box-sizing: border-box;
            width: 92%;
            margin: 4%;
            padding: 8% 4%;
            left: auto;
            top: auto
        }

        #main input[type=text], #main input[type=password] {
            box-sizing: border-box;
            width: 100%
        }

        #main .verifyCodeInput {
            width: 100%
        }

        #main .verifyCodeInput input[type=text] {
            width: 56%;
            margin-right: 4%;
            float: left
        }

        #main .verifyCodeInput .yzm {
            width: 30%;
            float: left
        }

        #main .verifyCodeInput .reflash {
            margin: 24px 0 0;
            float: right
        }

        #main .verifyCodeInput .code_cont {
            overflow: hidden
        }
    }
</style>
